<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>颜色变化的button按钮样式</title>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        .buttons {
            margin: 10%;
            text-align: center
        }

        /* 第三步：设置图标样式 ，重点background-size*/
        .btn-hover {
            width: 200px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            margin: 20px;
            height: 55px;
            text-align: center;
            border: 0;
            background-size: 300% 100%; /*用来设置背景图片尺寸大小 */
            border-radius: 50px;
            -moz-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out
        }

        /* 第四步：设置鼠标移入的效果，重点background-position*/
        .btn-hover:hover {
             background-position: 100% 0; /*用于设置背景图像的起始位置的，鼠标移上去的时候改变起始位置*/
            -moz-transition: all .4s ease-in-out; /* -moz-：火狐浏览器兼容 鼠标离开时，回来的过渡效果 */
            -o-transition: all .4s ease-in-out; /* -o-：opera浏览器兼容 */
            -webkit-transition: all .4s ease-in-out; /* -webkit-：谷歌浏览器器兼容 */
            transition: all .4s ease-in-out 
        }

        .btn-hover:focus {
            outline: 0
        }

        /* 第二步：给两个按钮设置一个背景色和阴影 */
        .btn-hover.color-1 {
            background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
            box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75)
        }

        .btn-hover.color-2 {
            background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
            box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75)
        }
    </style>
</head>

<body>
    <!-- 第一步：写两个按钮 -->
    <div class="buttons">
        <button class="btn-hover color-1">BUTTON</button>
        <button class="btn-hover color-2">BUTTON</button>
    </div>
</body>

</html>